<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>推广公司结算</el-breadcrumb-item>
            </el-breadcrumb>

            <el-tabs v-model="activeName" @tab-click="handleClick">

                <el-tab-pane label="结算列表" name="list">
                    <div class="btnBox">
                        <div>
                            <span>公司名称：</span>
                            <el-input size="small" v-model="gsName" placeholder="请输入公司名称"></el-input>
                        </div>
                        <div>
                            <el-button size="small" icon="el-icon-search" @click="getList('search')">搜索</el-button>
                            <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                        </div>
                    </div>
                    <el-table :data="tableData" border style="width: 100%" height="590">
                        <el-table-column prop="companyId" label="ID" width="70"></el-table-column>
                        <el-table-column prop="companyName" label="公司名称"></el-table-column>
                        <el-table-column prop="remainGrant" label="本月待结算"></el-table-column>
                        <el-table-column prop="totalGrant" label="累计已结算"></el-table-column>
                        <el-table-column label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.remainGrant == '0' || scope.row.remainGrant == null"
                                    type="success">已结算</el-tag>
                                <el-tag v-else type="danger">未结算</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button size="small" icon="el-icon-tickets"
                                    @click="handle('detail', scope.row)">详情</el-button>
                                <el-button size="small" icon="el-icon-coin" @click="handle('jie', scope.row)"
                                    v-if="scope.row.remainGrant != 0 && scope.row.remainGrant !== null">佣金结算</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="数据统计" name="data">
                    <div class="dateBox">
                        <el-radio-group v-model="selectType" size="mini" @change="btnChange">
                            <el-radio-button label="年"></el-radio-button>
                            <el-radio-button label="月"></el-radio-button>
                        </el-radio-group>
                        <div style="margin-left: 16px">
                            <span>日期：</span>
                            <el-date-picker v-if="selectType == '年'" size="small" v-model="dateStr" type="year"
                                placeholder="请选择时间" value-format="yyyy" @change="dataTimeChange">
                            </el-date-picker>
                            <el-date-picker v-else size="small" v-model="dateStr" type="month" placeholder="请选择月份"
                                value-format="yyyy-MM" @change="dataTimeChange">
                            </el-date-picker>
                        </div>
                    </div>
                    <div id="shopBox"></div>
                </el-tab-pane>
            </el-tabs>
        </el-card>


        <!-- 弹窗 -->
        <el-dialog :title="diaFlag == 'jie' ? '结算' : '结算详情'" :visible.sync="addDia" width="30%"
            :before-close="closeAddDialog">
            <template v-if="diaFlag == 'jie'">
                <el-form :model="jieForm" :rules="rules" ref="form" label-width="120px">
                    <el-form-item label="待结算佣金" prop="daiJieNum">
                        <div class="grantMoney">{{ jieForm.daiJieNum }} <span>元</span></div>
                    </el-form-item>
                    <el-form-item label="本次结算佣金" prop="grantMoney">
                        <el-input type="number" v-model="jieForm.grantMoney" @input="inputHandle"
                            placeholder="请输入本次结算佣金">
                            <el-button slot="append" @click="jieAllhandle">全部结算</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="剩余佣金" prop="resNum">
                        <el-input v-model="jieForm.resNum" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="jieForm.grantRemark" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeAddDialog">取 消</el-button>
                    <el-button type="primary" @click="submitAddDialog">确 定</el-button>
                </span>
            </template>
            <template v-if="diaFlag == 'detail'">
                <div class="infoBox">
                    <!-- <div>
                        总佣金：<span>1111</span>元
                    </div> -->
                    <div>
                        待结算：<span>{{ jieForm.daiJieNum }}</span>元
                        <download-excel
                        class="export-excel-wrapper"
                            :data="jieDetailList"
                            :fields="json_fields"
                            :header="title"
                            :name="`${jieDetailList[0].companyName}结算详情.xls`"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
                    </div>
                </div>
                <el-table :data="jieDetailList" border style="width: 100%">
                    <el-table-column prop="grantMoney" label="结算金额"></el-table-column>
                    <el-table-column prop="grantDate" label="结算时间"></el-table-column>
                    <el-table-column prop="grantRemark" label="备注"></el-table-column>
                </el-table>
            </template>
        </el-dialog>

    </div>
</template>

<script>

import * as echarts from "echarts";
import { getCompanyList, addCompanyList, getCompanyCommison, settleCompanyCommison, getCompanyListInfo } from '../../network/company'
export default {
    data() {
        return {
            tableData: [],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            gsName: '', // 公司名称
            selectData: '',//入驻时间

            addDia: false, // 弹窗
            diaFlag: '',//  jie  结算弹窗   detail  结算详情 

            jieForm: {  // 结算详情
                companyId: '',
                daiJieNum: '', //待结算佣金
                resNum: 0, // 剩余佣金
                grantMoney: '',  // 本次结算佣金
                grantRemark: '',
            },
            rules: {
                grantMoney: [
                    { required: true, message: '请输入本次结算佣金', trigger: 'blur' },
                ],
            },
            jieDetailList: [],//结算佣金详细记录

            activeName: 'list',

            shopData: '',
            selectType: '月',
            dateStr: '',
            json_fields: {
        "序号":'companyCommissionId',
        "结算金额":'grantMoney',
        "结算日期":'grantDate',
        "结算备注":'grantRemark',
      },
        };
    },
    methods: {

        jieAllhandle() {
            this.jieForm.grantMoney = this.jieForm.daiJieNum
            this.inputHandle()
        },

        dataTimeChange() {
            console.log(this.dateStr);
            this.getCompanyGrantInof(this.dateStr)
        },

        btnChange() {
            this.dateStr = this.getDate(this.selectType == '年' ? 1 : 2)
            console.log(this.dateStr);
        },

        handleClick() {
            if (this.activeName == 'data') {
                this.getShopsEchart('shopBox', this.shopData)
            }
        },
        getShopsEchart(echartsId, data) {
            var myChart = this.$echarts.init(document.getElementById(`${echartsId}`))
            var option = {

                //在容器中的位置
                grid: {
                    left: '0%',
                    right: '16%',
                    bottom: '4%',
                    top: '10%',
                    containLabel: true
                },
                //悬浮卡片
                tooltip: {
                    trigger: 'axis',  //坐标轴触发
                    // axisPointer: {
                    //     type: 'none'
                    // },
                },
                xAxis: {
                    type: 'category',
                    data: data.xData,
                    axisLabel: {
                        show: true,
                        // rotate: 40,//35度角倾斜显示
                        interval: 0,
                        fontSize: 16,
                        color: '#333'
                    },
                    // axisTick: {
                    //     show: false
                    // },
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                    },
                    //轴线相关配置：
                    // axisLine: {
                    //     show: true,  //去掉y轴的线
                    //     lineStyle: {
                    //         color: ['#999'],
                    //         width: 1,
                    //         type: 'solid'
                    //     }
                    // },

                    // splitLine: {
                    //     show: true,
                    //     lineStyle: {
                    //         color: ['#d7330c'],
                    //         width: 1,
                    //         type: 'solid'
                    //     }
                    // }

                },
                yAxis: {
                    name: '元',
                    type: 'value',
                    // interval: 100,
                    axisLabel: {
                        show: true,
                        fontSize: 14,
                        color: '#333'
                    },
                    //隐藏y轴的横线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#7b8497',
                            type: 'dashed'//虚线
                        }
                    },
                    splitNumber: 9,  //设置y轴的间隔
                    //刻度相关配置：
                    axisTick: {
                        show: false,//去掉刻度
                        alignWithLabel: true, //刻度和值居中对齐
                    },
                    //轴线相关配置：
                    axisLine: {
                        show: true,  //去掉y轴的线
                    },
                },
                series: [
                    {
                        name: '累计金额',
                        data: data.yData,
                        type: 'bar',
                        barWidth: "30",
                        itemStyle: {
                            //设置渐变色
                            opacity: 1, //透明度0隐藏，1显示
                            barBorderRadius: [25, 25, 0, 0], //顶部的圆角弧度
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#EB5538' }, //渐变上面
                                { offset: 0, color: '#ECA158' }, //渐变上面
                                // { offset: 1, color: 'rgba(77,105,231,0.02)' } //渐变下面
                            ])
                        },

                    }
                ],

            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },



        handle(flag, obj) {
            this.diaFlag = flag
            this.jieForm.companyId = obj.companyId
            this.jieForm.daiJieNum = obj.remainGrant
            this.addDia = true
            if (flag == 'detail') {
                getCompanyCommison({
                    companyId: obj.companyId
                }).then(res => {
                    this.jieDetailList = res.data
                })
            } else if (flag == 'jie') {
                this.addDia = true;
            }
        },

        //   提交结算
        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return

                if (this.jieForm.grantMoney < 1) {
                    this.$message.warning('结算金额输入有误')
                    return
                }
                settleCompanyCommison(this.jieForm).then(res => {
                    if (res.flag) {
                        this.getList('search')
                        this.addDia = false
                    }
                })
                console.log(this.jieForm);
                this.$message.success('结算成功')

            });


        },



        // 检测本次结算佣金
        inputHandle() {


            var form = this.jieForm

            if (form.grantMoney > form.daiJieNum) {
                this.$message.warning('结算佣金大于待结算佣金，请仔细核对')
                form.grantMoney = 0
            }
            form.resNum = form.daiJieNum - form.grantMoney

            this.jieForm = form
        },

        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.gsName);
                console.log(this.selectData);
                this.selectData = this.getDate(2)
                this.dateStr = this.getDate(2)

                getCompanyList({
                    companyName: this.gsName,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    companyId: sessionStorage.companyId
                }).then(res => {
                    if (res.flag) {
                        this.tableData = res.data.list;
                        this.totalNum = res.data.total;
                    }
                })



                return
                getCompanyList({
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    companyName: this.gsName,
                    startTime: this.selectData[0],
                    endTime: this.selectData[1],
                    companyId: 1
                }).then(res => {
                    if (res.flag) {

                        this.tableData = res.data.list;
                        this.totalNum = res.data.total;
                    }
                })
            } else if (flag == 'res') {
                this.tableData = []
                this.gsName = ''
                this.selectData = ''
                this.$message.success('已重置')
                this.getList('search')
            }
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.getList('search')
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList('search')
        },

        closeAddDialog() {
            this.addDia = false
            if (this.diaFlag == 'jie') {
                this.$refs.form.resetFields()
            }
        },




        getDate(flag) {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            return flag == 1 ? year : year + '-' + (month < 10 ? '0' + month : month)
        },
        getCompanyGrantInof(obj) {
            getCompanyListInfo({
                companyId: sessionStorage.companyId,
                grantTime: obj
            }).then(res => {
                if (res.flag) {
                    this.shopData = res.data
                    this.getShopsEchart('shopBox', this.shopData)
                }
            })
        }

    },

    created() {

        console.log(this.getDate(2));

        this.selectData = this.getDate(2)
        this.dateStr = this.getDate(2)

        getCompanyList({
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            companyId: 1
        }).then(res => {
            if (res.flag) {
                this.tableData = res.data.list;
                this.totalNum = res.data.total;
            }
        });
        this.getCompanyGrantInof(this.dateStr);


    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}


.infoBox {
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
}

.infoBox>div {
    margin-right: 24px;
}

.infoBox>div>span {
    margin-right: 6px;
    font-size: 22px;
    font-weight: bold;
    color: rgb(228, 37, 37);
}

.grantMoney {
    font-size: 22px;
    color: rgb(228, 37, 37);
}

.grantMoney>span {
    font-size: 16px;
}

#shopBox {
    width: 100vw;
    height: 70vh;
}

.dateBox {
    display: flex;
    align-items: center;
}
</style>